<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:50px;height:50px;}
    </style>
</head>
<body>
    <h2>这是购物车，<small><a href="./index.html">继续购物</a></small></h2>
    <table width="1000" align="center" border="1">
        <thead>
            <tr>
                <th>选中</th>
                <th>图片</th>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td align="center"><input type="checkbox" id="allCheck"></td>
                <td><label for="allCheck">全选</label></td>
                <td align="right">总数量</td>
                <td id="allNum">0</td>
                <td align="right">总价</td>
                <td id="allPrice">0</td>
                <td id="delCheck">删除选中</td>
            </tr>
        </tfoot>
    </table>
</body>
<script src="./js/ajax.js"></script>
<script src="./js/Toast.js"></script>
<script>
    const token = sessionStorage.getItem("token");

    // 登录守卫
    ajax({
        url:"http://localhost:3000/checklogin",
        data:{
            token
        },
        success:res=>{
            res = JSON.parse(res);
            if(res.code === 0){
                location.assign("./login.html")
            }
        }
    })

    // 准备获取购物车信息
    ajax({
        url:"http://localhost:3000/getcart",
        data:{
            token
        },
        success:res=>{
            res = JSON.parse(res).data;
            console.log(res);

            let str = "";
            res.forEach(val=>{
                const p = (val.discount * val.price * 0.1).toFixed(2);
                str += `<tr myid="${val.goodsId}">
                            <td><input class="check" type="checkbox" ${val.check ? 'checked' : ''} ></td>
                            <td><img src="${val.goodsImg}" alt=""></td>
                            <td>${val.goodsName}</td>
                            <td><input class="setNum" type="number" min="1" value="${val.num}"></td>
                            <td>${p}</td>
                            <td>${(p * val.num).toFixed(2)}</td>
                            <td class="del">删除</td>
                        </tr>`
            })
            $("tbody").innerHTML = str;

            // 计算总数量
            // let sum = 0;
            // for(let i=0;i<res.length;i++){
            //     sum += res[i].num
            // }
            // $("#allNum").innerText = sum;

            // 计算总数量
            $("#allNum").innerText = res.reduce((prev, now)=>prev + now.num, 0);

            // 计算总价
            $("#allPrice").innerText = res.reduce((prev, now)=>prev + now.num * (now.price * now.discount * 0.1), 0).toFixed(2);

            // 判断是否需要全选
            $("#allCheck").checked = res.every(val=>val.check);

            $("#allCheck").onchange = function(){
                [...$$(".check")].forEach(val=>{
                    val.checked = this.checked;
                })
                ajax({
                    type:"post",
                    url:"http://localhost:3000/allcheck",
                    data:{
                        token, check: this.checked
                    },
                    success:()=>{
                        new Toast({
                            text: "修改成功",
                            color: "green"
                        })
                    }
                })
            }

            // 添加复选项框的切换事件
            $("tbody").onchange = function(eve){
                if(eve.target.className === "check"){
                    // 获取选中状态，id
                    const check = eve.target.checked;
                    const id = eve.target.parentNode.parentNode.getAttribute("myid");
                    // 发起修改请求，将要修改的内容和id发送给后端
                    ajax({
                        type:"post",
                        url:"http://localhost:3000/setcart",
                        data:{id, check, token},
                        success:res=>{
                            res = JSON.parse(res);
                            new Toast({
                                text: "修改成功",
                                color: "green"
                            })
                            // 重新获取最新数据，用来计算总数量和总价
                            ajax({
                                url:"http://localhost:3000/getcart",
                                data:{
                                    token
                                },
                                success:res=>{
                                    res = JSON.parse(res).data;
                                    // 判断是否需要全选
                                    $("#allCheck").checked = res.every(val=>val.check);
                                }
                            })
                        }
                    })
                }
            }

            // 添加数字框的修改事件
            $("tbody").oninput = function(eve){
                if(eve.target.className === "setNum"){
                    // 获取修改后的新数量，id
                    const num = eve.target.value;
                    const id = eve.target.parentNode.parentNode.getAttribute("myid");
                    // 发起修改请求，将要修改的内容和id发送给后端
                    ajax({
                        type:"post",
                        url:"http://localhost:3000/setcart",
                        data:{id, num, token},
                        success:res=>{
                            res = JSON.parse(res);
                            new Toast({
                                text: "修改成功",
                                color: "green"
                            })

                            // 重新获取最新数据，用来计算总数量和总价
                            ajax({
                                url:"http://localhost:3000/getcart",
                                data:{
                                    token
                                },
                                success:res=>{
                                    res = JSON.parse(res).data;
                                    // 计算总数量
                                    $("#allNum").innerText = res.reduce((prev, now)=>prev + now.num, 0);
                                    // 计算总价
                                    $("#allPrice").innerText = res.reduce((prev, now)=>prev + now.num * (now.price * now.discount * 0.1), 0).toFixed(2);
                                }
                            })
                        }
                    })
                }
            }

            // 添加删除按钮的点击事件
            $("tbody").onclick = function(eve){
                if(eve.target.className === "del"){
                    // 获取要删除的商品id
                    const id = eve.target.parentNode.getAttribute("myid");
                    eve.target.parentNode.remove();
                    // 发起修改请求，将要修改的内容和id发送给后端
                    ajax({
                        type:"post",
                        url:"http://localhost:3000/setcart",
                        data:{id, del:true, token},
                        success:res=>{
                            res = JSON.parse(res);
                            new Toast({
                                text: "删除成功",
                                color: "green"
                            })
                            
                        }
                    })
                }
            }
        }
    })

    function $(sel){
        return document.querySelector(sel);
    }
    function $$(sel){
        return document.querySelectorAll(sel);
    }

</script>
</html>